/*--- 美化滚动条 ---*/
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  width: 6px;
  background: rgba(#101f1c, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(#101f1c, 0.5);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(#101f1c, 1);
}

/* ==================
          布局
 ==================== */

/*  -- flex弹性布局 -- */

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-start {
  align-items: flex-start;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: flex-end;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-center {
  justify-content: center;
}

.direction-row {
  flex-direction: row;
}

.direction-row-reverse {
  flex-direction: row-reverse;
}

.direction-column {
  flex-direction: column;
}

.direction-column-reverse {
  flex-direction: column-reverse;
}

.grow-0 {
  flex-grow: 0;
}

.grow-1 {
  flex-grow: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.shrink-1 {
  flex-shrink: 1;
}

/*  -- 内外边距 行高 -- */
@each $short, $long in xs 10, sm 20, md 30, lg 40, xl 50 {
  @if $short !=md {
    @each $a in top, right, bottom, left {
      .margin-#{$a}-#{$short} {
        margin-#{$a}: $long + px;
      }

      .padding-#{$a}-#{$short} {
        padding-#{$a}: $long + px;
      }
    }

    .margin-#{$short} {
      margin-top: $long + px;
      margin-bottom: $long + px;
      margin-left: $long + px;
      margin-right: $long + px;
    }

    .padding-#{$short} {
      padding-top: $long + px;
      padding-bottom: $long + px;
      padding-left: $long + px;
      padding-right: $long + px;
    }

    .margin-tb-#{$short} {
      margin-top: $long + px;
      margin-bottom: $long + px;
    }

    .padding-tb-#{$short} {
      padding-top: $long + px;
      padding-bottom: $long + px;
    }

    .margin-lr-#{$short} {
      margin-left: $long + px;
      margin-right: $long + px;
    }

    .padding-lr-#{$short} {
      padding-left: $long + px;
      padding-right: $long + px;
    }

    .line-height-#{$short} {
      line-height: $long + px;
    }
  } @else {
    @each $a in top, right, bottom, left {
      .margin-#{$a} {
        margin-#{$a}: $long + px;
      }

      .padding-#{$a} {
        padding-#{$a}: $long + px;
      }
    }

    .margin {
      margin-top: $long + px;
      margin-bottom: $long + px;
      margin-left: $long + px;
      margin-right: $long + px;
    }

    .padding {
      padding-top: $long + px;
      padding-bottom: $long + px;
      padding-left: $long + px;
      padding-right: $long + px;
    }

    .margin-tb {
      margin-top: $long + px;
      margin-bottom: $long + px;
    }

    .padding-tb {
      padding-top: $long + px;
      padding-bottom: $long + px;
    }

    .margin-lr {
      margin-left: $long + px;
      margin-right: $long + px;
    }

    .padding-lr {
      padding-left: $long + px;
      padding-right: $long + px;
    }

    .line-height {
      line-height: $long + px;
    }
  }
}


/* ==================
      文本 背景颜色
 ==================== */

/*  -- 背景颜色 -- */
.bg-red {
  background-color: #e10b2b;
  color: #ffffff;
}

.bg-orange {
  background-color: #f37b1d;
  color: #ffffff;
}

.bg-yellow {
  background-color: #fbbd08;
  color: #333333;
}

.bg-olive {
  background-color: #8dc63f;
  color: #ffffff;
}

.bg-green {
  background-color: #39b54a;
  color: #ffffff;
}

.bg-cyan {
  background-color: #1cbbb4;
  color: #ffffff;
}

.bg-blue {
  background-color: #03a9f4;
  color: #ffffff;
}

.bg-purple {
  background-color: #6739b6;
  color: #ffffff;
}

.bg-mauve {
  background-color: #9c26b0;
  color: #ffffff;
}

.bg-pink {
  background-color: #e03997;
  color: #ffffff;
}

.bg-brown {
  background-color: #a5673f;
  color: #ffffff;
}

.bg-grey {
  background-color: #8799a3;
  color: #ffffff;
}

.bg-gray {
  background-color: #f0f0f0;
  color: #333333;
}

.bg-black {
  background-color: #333333;
  color: #ffffff;
}

.bg-white {
  background-color: #ffffff;
  color: #666666;
}

/*  -- 文本颜色 -- */
.text-red,
.line-red,
.lines-red {
  color:#e10b2b;
}

.text-orange,
.line-orange,
.lines-orange {
  color: #f37b1d;
}

.text-yellow,
.line-yellow,
.lines-yellow {
  color: #fbbd08;
}

.text-olive,
.line-olive,
.lines-olive {
  color: #8dc63f;
}

.text-green,
.line-green,
.lines-green {
  color: #39b54a;
}

.text-cyan,
.line-cyan,
.lines-cyan {
  color: #1cbbb4;
}

.text-blue,
.line-blue,
.lines-blue {
  color: #03a9f4;
}

.text-purple,
.line-purple,
.lines-purple {
  color: #6739b6;
}

.text-mauve,
.line-mauve,
.lines-mauve {
  color: #9c26b0;
}

.text-pink,
.line-pink,
.lines-pink {
  color: #e03997;
}

.text-brown,
.line-brown,
.lines-brown {
  color: #a5673f;
}

.text-grey,
.line-grey,
.lines-grey {
  color: #999999;
}

.text-gray,
.line-gray,
.lines-gray {
  color: #666666;
}

.text-black,
.line-black,
.lines-black {
  color: #333333;
}

.text-white,
.line-white,
.lines-white {
  color: #ffffff;
}

/*  -- 字体加粗 -- */
.font-bold {
  font-weight: bold;
}


//overflow

.overflow-auto{
  overflow: auto;
}
.overflow-hidden{
  overflow: hidden;
}